import { Grid, Typography } from '@mui/material';
import { Box, Container } from '@mui/system';
import { dehydrate, QueryClient } from '@tanstack/react-query';
import { NextPage } from 'next';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import Image from 'next/image';
import { useRouter } from 'next/router';
import React from 'react';
import GridItem from '../../components/grid-item/GridItem';
import Loader from '../../components/loader/Loader';
import ProductCard from '../../components/product-card/ProductCard';
import TabContent from '../../components/tab-content/TabContent';
import { useFetchSingleProduct } from '../../hooks/useFetchProductData';
import { getProductData } from '../../requests/products/producDataRequest';
import { useStore, useStoreUpdate } from '../../store/cart-context';
import { SingleProductResponseGet } from '../../utils/interface/productInterface';

interface Props {
  data: SingleProductResponseGet;
}

const SingleProduct: NextPage<Props> = ({ data }) => {
  const { t } = useTranslation('products');
  const { addCartValue } = useStoreUpdate();
  const { cartStorage } = useStore();

  const router = useRouter();

  const customId = router.query.customId ? router.query.customId as string : undefined;

  // const { data, isLoading } = useFetchSingleProduct(customId);

  const addProductToCart = (quantity: number) => addCartValue(data?.product, quantity);
  const inCart =
    cartStorage?.length > 0
      ? cartStorage?.some((item) => item.product.customID === data?.product.customID)
        ? true
        : false
      : false;

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <Container>
        <Typography
          fontFamily={'body1.fontFamily'}
          fontSize="32px"
          sx={{ mt: 25, height: '100%', color: 'primary.main' }}
        >
          {data?.product.name}
        </Typography>
        <Grid container spacing={2}>
          <Grid sx={{ display: 'flex' }} item md={6} sm={12}>
            <Image
              src={data?.product.image}
              alt="product"
              width={900}
              height={700}
            />
          </Grid>
          <TabContent
            description={data?.product.description}
            inCart={inCart}
            price={data?.product.price}
            category={data?.product.category}
            addProductToCart={addProductToCart}
          />
        </Grid>

        <Typography
          sx={{
            mt: { xs: '60px', md: '100px', lg: '150px' },
            mb: 5,
            color: 'primary.main',
            fontSize: '32px',
          }}
        >
          {t('products:similar')}
        </Typography>
        <Grid container spacing={2}>
          {data?.similarProducts.map((product) => (
            <GridItem key={product._id}>
              <ProductCard product={product} />
            </GridItem>
          ))}
        </Grid>
      </Container>
    </Box>
  );
};

export const getServerSideProps = async (context: any) => {
  const { params } = context;
  const { customId } = params;

  console.log(customId);

  const queryClient = new QueryClient();

  const data = await queryClient.fetchQuery(
    ['product', customId],
    async () => await getProductData(customId)
  );
  await queryClient.fetchQuery(
    ['product', customId],
    async () => await getProductData(customId)
  );

  return {
    props: {
      data: data,
      dehydratatedState: dehydrate(queryClient),
      ...(await serverSideTranslations(context.locale, ['products'])),
    },
  };
};

export default SingleProduct;